<template>
  <div class="layout">
    <Layout :style="{ minHeight: '100vh' }">
      <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
        <Menu
          @on-select="select"
          active-name="/"
          theme="light"
          width="auto"
          :class="menuitemClasses"
        >
          <MenuItem name="/">
            <Icon type="ios-home-outline"></Icon>
            <span>首页</span>
          </MenuItem>
          <MenuItem name="/tiziShow">
            <Icon type="ios-send-outline"></Icon>
            <span>分享</span>
          </MenuItem>
          <MenuItem name="/mainPage" v-if="admin">
            <Icon type="md-planet"></Icon>
            <span>管理员页面</span>
          </MenuItem>
          <MenuItem name="minePage1">
            <Icon type="ios-cloud-upload-outline" />
            <span>商品发布</span>
          </MenuItem>
          <MenuItem name="minePage2">
            <Icon type="ios-images-outline" />
            <span>帖子分享</span>
          </MenuItem>
          <!-- <MenuItem name="minePage3">
            <Icon type="ios-moon-outline" />
            <span>测试</span>
          </MenuItem> -->
          <MenuItem name="/minePage" style="margin-top: 500px">
            <!-- <Icon type="md-happy" /> -->
            <img
              style="width: 30px; height: 30px; border-radius: 15px"
              :src="herdUrl"
            />
            <!-- <span>头像</span> -->
          </MenuItem>
          <!-- <MenuItem name="1-5">
            <Icon type="ios-moon-outline" />
            <span>月亮</span>
          </MenuItem> -->
          <MenuItem name="/friendPage">
            <Icon type="ios-cog-outline" />
            <span>设置</span>
          </MenuItem>
        </Menu>
      </Sider>
      <Layout>
        <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)',display:flex}">
                    <img src="../assets/logo.png" style=" width: 160px; height: 60px;">
                    <!-- <Button style="margin-left: 400px;" shape="circle" icon="ios-chatboxes-outline" @click="openFriend()"></Button>
                 
                      <Button type="text" style="margin-left: 10px;" shape="circle" icon="ios-moon"></Button> -->
           
                </Header>
        <Content style="height: 800px; display: flex">
          <router-view></router-view>
          <div class="container" v-if="showHome">
                <div style="width: 100%;height: 100%;display: flex;">
                <change-message></change-message>
                </div>
          </div>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>
import changeMessage from '@/view/mineson/changeMessage.vue';
// import TiziShow from '@/view/mineson/tiziShow.vue';
// import axios from 'axios';
export default {
  components: {changeMessage},
  data() {
    return {
      user:[],
      keyText:'',
      activeName:'first',
      showHome: false,
      isCollapsed: false,
      admim:false,
      herdUrl:
        "https://anan-petp.oss-cn-hangzhou.aliyuncs.com/img/photos/20230509/src=http___c-ssl.duitang.com_uploads_blog_202107_19_20210719150601_4401e.thumb.1000_0.jpg&refer=http___c-ssl.duitang.webp",
    };
  },
  created() {
    if (this.$store.state.herdUrl) {
      this.herdUrl = this.$store.state.herdUrl;
    }
  },
  methods: {
    select(name) {
      if (name != "/") {
        this.showHome = false;
      } else {
        this.showHome = true;
      }
      console.log(name);
      this.$router.push({
        path: name,
      });
    },
  },
  computed: {
    menuitemClasses: function () {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    },
  },
  mounted(){
    const savedUser = localStorage.getItem("user");
    console.log(localStorage.getItem("user"));
    if (savedUser) {
      this.user = JSON.parse(savedUser);
      console.log(111111111111111,this.user);
    }
    if(this.user.username == 'admin'){
      this.admin = true
    }
  },
};
</script>
<style scoped>
.layout-con {
  height: 100%;
  width: 100%;
}
.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}
.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
.dev-run-preview .dev-run-preview-edit {
  display: none;
}
.titlemenu {
  background: #675b5b;
}
.container{
    width: 100%;
    height: 100%;
}
::v-deep .ivu-menu ivu-menu-light ivu-menu-vertical menu-item collapsed-menu{
  color: rgb(0, 46, 85);
}
</style>